<template>
  <div id="can1"></div>
</template>

<script setup>
import { onMounted, onUnmounted } from "vue";
import { CanvasRenderer } from "echarts/renderers";
import { init, use, dispose, registerMap } from "echarts/core";
import { TooltipComponent } from "echarts/components";
import { MapChart } from "echarts/charts";
import { Bar3DChart } from "echarts-gl/charts";
import { Geo3DComponent } from "echarts-gl/components";
import china from "../map/china.json";

let myChart = null;
let can1 = null;
onMounted(() => {
  use([CanvasRenderer, TooltipComponent, Geo3DComponent, Bar3DChart, MapChart]);
  registerMap("china", china);
  can1 = document.getElementById("can1");
  myChart = init(can1);
  let options = {
    tooltip: {},
    geo3D: {
      map: "china",
      light: {
        main: {
          color: 'white',
          shadow: true,
          alpha: 40,
          beta: 0
        }
      },
      shading: 'realistic',
      realisticMaterial: {
        detailTexture: '/image/mount.png',
        metalness: 0.4,
      },
      label: {
        show: false,
        formatter: function ({ name }) {
          return `${name} `; //注意name后加了空格
        },
      },
      itemStyle: {
        // color: "red",
      },
    },
    series: [
      {
        type: "bar3D",
        coordinateSystem: "geo3D",
        minHeight: 3,
        itemStyle: {
          color: 'red'
        },
        data: [
          [116.405285, 39.904989, 60],
          [117.190182, 39.125596, 60],
          [112.549248, 37.857014, 80],
        ],
      },
    ],
  };
  myChart.setOption(options);
});

onUnmounted(() => {
  dispose(can1);
  myChart = null;
});
</script>

<style lang="less" scoped>
#can1 {
  width: 800px;
  height: 400px;
}
</style>
